<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
	<title>Tracker</title>
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
		$(document).ready(function() {
			$('a').click(function() {
				var socket = io.connect();
				var name = $('#name').val();
				socket.emit('join', name);
				
				socket.on('receive', function(data) {
					var latitude = data.latitude;
					var longitude = data.longitude;
					
					var output = '';
					output += '<h3>latitude: ' + latitude + '</h3>';
					output += '<h3>longitude: ' + longitude + '</h3>';
					output += '<p>' + data.date + '</p>';
					
					$('#listview').prepend($('<div></div>').append(output));
					
					var content = $('#content');
					if(content.children().length > 7) {
						content.children().last().remove();
					}
					
					$('#listview').listview('refresh');
				});
				
				navigator.geolocation.watchPosition(function(position) {
					socket.emit('location', {
						name: name,
						latitude: position.coords.latitude,
						longitude: position.coords.longitude
					});
				}, function(error) {
					alert(error.message);
				});
			});
		});
	</script>
</head>
<body>
	<!-- ID registration -->
	<div data-role="page">
		<div data-role="header">
			<h1>Location Tracker</h1>
		</div>
		<div data-role="content">
			<div data-role="fieldcontain">
				<label for="textinput">Name</label>
				<input type="text" id="name"/>
			</div>
			<a href="#tracker" data-role="button">Start Track</a>
		</div>
	</div>
	
	<!-- Location Tracking -->
	<div data-role="page" id="tracker">
		<div data-role="header">
			<h1>Location Tracker</h1>
		</div>
		<div data-role="content">
			<ul id="listview" data-role="listview" data-inset="true"></ul>
		</div>
	</div>
</body>
</html>